<template>
  <div class="">
    <div class="common_title pad_b20 margin_b20">新增/编辑公告</div>
    <div class="bg_fff pad_tb40">
      <el-form ref="form" :rules="rules" :model="form"  label-width="120px">
        <el-row>
          <FormItem label="公告标题" class="" type="input" :form="form" prop="title" clearable style="width: 500px;" />
        </el-row>
        <el-row>
           <FormItem label="公告描述" class="" type="textarea" :form="form" prop="description" clearable style="width: 500px;" />
        </el-row>
        <div class="pad_r40">
          <el-form-item label="公告内容" style="max-width: 1200px;" prop="content">
             <editor v-model="form.content" :min-height="192"/>
          </el-form-item>
        </div>
        <el-row>
          <el-form-item label="排序">
              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="是否禁用">
             <el-radio-group v-model="form.is_hid">
             	<el-radio :label="1">禁用</el-radio>
             	<el-radio :label="0">启用</el-radio>
             </el-radio-group>
          </el-form-item>
        </el-row>

        <div class="bottom_btn pad_t10" style="padding-left: 120px;">
            <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">提交</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
        </div>
      </el-form>

    </div>

    <!-- 上传图片预览 -->
    <el-dialog  :close-on-click-modal="false" append-to-body @closed="uploadImageUrl=''" width="600px" :visible.sync="uploadImgVisible">
      <img style="width: 100%;" :src="uploadImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import Editor from '@/components/Editor';
export default {
  name: 'add_company',
  components: {Editor},
  data () {
    return {
      id: '',
      is_ajax: false,
      form: {
          is_hid:0,
          sort:0
      },
      rules: {
        title: [
          { required: true, message: "公告标题不能为空",trigger: "blur"}
        ],
        description: [
          { required: true, message: "公告描述不能为空",trigger: "blur"}
        ],
        content: [
          { required: true, message: "公告内容不能为空",trigger: "blur"}
        ]
      },
      openOptions: [],
      open:false,
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false
    }
  },
  created() {
    this.id=this.$route.query.id || '';
    if(this.id){
        this.get_data()
    }
  },
  methods:{


    // 表单重置
    reset(pid) {
      this.form = {
        is_hid:0,
        sort:0
      };
      if(this.$refs['form']){
        this.$refs['form'].clearValidate();
      }
    },
    /** 提交按钮 */
    submitForm: function(form) {
      this.$refs[form].validate((valid)  => {
        if (valid) {
          this.is_ajax=true;
          if(form=='form'){
            let url="/api/Article/create";
            if(this.form.id){
              url="/api/Article/edit"
            }
            let _data={...this.form}
            _data.content=this.remove_upload_http(_data.content)
            this.axios.post(url, _data).then((res) => {
                if (res) {
                    this.$message.success('操作成功');
                    this.$router.go(-1)
                } else {
                    this.$message.error(res.message);
                }
                this.is_ajax=false;
            }).catch((err) => {
                console.log(err);
                this.is_ajax=false;
            });
          }
        }
      });
    },
    get_data(){
        this.axios.get("/api/Article/read", {params:{id:this.id}}).then((res) => {
            if (res) {
                let _data=res.data;
                _data.content=this.add_upload_http(_data.content);
                this.form=_data
            } else {
                this.$message.error(res.message);
            }
        }).catch((err) => {
            console.log(err);
        });
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
